<!DOCTYPE HTML>
<html>

<head>

    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<body>
    <meta charset="utf-8">
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>



    <body>
        <div class="container">
            <h2>提示框动画</h2>
            <p>.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：</p>
            <div class="alert alert-success alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>成功!</strong> 指定操作成功提示信息。
            </div>
            <div class="alert alert-info alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>信息!</strong> 请注意这个信息。
            </div>
            <div class="alert alert-warning alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>警告!</strong> 设置警告信息。
            </div>
            <div class="alert alert-danger alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>错误!</strong> 失败的操作。
            </div>
            <div class="alert alert-primary alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>首选!</strong> 这是一个重要的操作信息。
            </div>
            <div class="alert alert-secondary alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>次要的!</strong> 显示一些不重要的信息。
            </div>
            <div class="alert alert-dark alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>深灰色!</strong> 深灰色提示框。
            </div>
            <div class="alert alert-light alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>浅灰色!</strong>浅灰色提示框。
            </div>
        </div>
        <div class="container">
            <h2>各种颜色类型的徽章</h2>
            <span class="badge badge-primary">主要</span>
            <span class="badge badge-secondary">次要</span>
            <span class="badge badge-success">成功</span>
            <span class="badge badge-danger">危险</span>
            <span class="badge badge-warning">警告</span>
            <span class="badge badge-info">信息</span>
            <span class="badge badge-light">浅色</span>
            <span class="badge badge-dark">深色</span>
        </div>
        <div class="container">
            <h2>代表指定意义的文本颜色</h2>
            <p class="text-muted">柔和的文本。</p>
            <p class="text-primary">重要的文本。</p>
            <p class="text-success">执行成功的文本。</p>
            <p class="text-info">代表一些提示信息的文本。</p>
            <p class="text-warning">警告文本。</p>
            <p class="text-danger">危险操作文本。</p>
            <p class="text-secondary">副标题。</p>
            <p class="text-dark">深灰色文字。</p>
            <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
            <p class="text-white">白色文本（白色背景上看不清楚）。</p>
        </div>
        <div class="container">
            <h2>背景颜色</h2>
            <p class="bg-primary text-white">重要的背景颜色。</p>
            <p class="bg-success text-white">执行成功背景颜色。</p>
            <p class="bg-info text-white">信息提示背景颜色。</p>
            <p class="bg-warning text-white">警告背景颜色</p>
            <p class="bg-danger text-white">危险背景颜色。</p>
            <p class="bg-secondary text-white">副标题背景颜色。</p>
            <p class="bg-dark text-white">深灰背景颜色。</p>
            <p class="bg-light text-dark">浅灰背景颜色。</p>
        </div>
        <div id="container" style="min-width:400px;height:400px"></div>
        <table class="table table-dark table-hover">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>July</td>
                    <td>Dooley</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
        <script>
            // JS 代码 
        </script>
    </body>

</html>


<script>

    var categories = ['0-4', '5-9', '10-14', '15-19',
        '20-24', '25-29', '30-34', '35-39', '40-44',
        '45-49', '50-54', '55-59', '60-64', '65-69',
        '70-74', '75-79', '80-84', '85-89', '90-94',
        '95-99', '100 + '];
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: '2015 年德国人口金字塔'
        },
        subtitle: {
            useHTML: true,
            text: '数据来源: <a href="http://populationpyramid.net/germany/2015/">1950 ~ 2100 年世界人口金字塔</a>'
        },
        xAxis: [{
            categories: categories,
            reversed: false,
            labels: {
                step: 1
            }
        }, {
            // 显示在右侧的镜像 xAxis （通过 linkedTo 与第一个 xAxis 关联）
            opposite: true,
            reversed: false,
            categories: categories,
            linkedTo: 0,
            labels: {
                step: 1
            }
        }],
        yAxis: {
            title: {
                text: null
            },
            labels: {
                formatter: function () {
                    return (Math.abs(this.value) / 1000000) + 'M';
                }
            },
            min: -4000000,
            max: 4000000
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                    '人口: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
            }
        },
        series: [{
            name: '男',
            data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,
            -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,
            -2176300, -1329968, -836804, -354784, -90569, -28367, -3878]
        }, {
            name: '女',
            data: [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
                3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
                1447162, 1005011, 330870, 130632, 21208]
        }]
    });
</script>
</body>

</html>